import * as echarts from '../node_modules/echarts/dist/echarts.esm.js';


let myChart1 = echarts.init(document.getElementById('mychart1'));

// 饼图数据
const pieData = [
    { value: 10, name: '销量' },
    { value: 20, name: '销售额' },
];

// // 检查所有值是否都为0
function isAllValuesZero(data) {
    return data.every(item => {
        const val = item.value;
        return val === 0 || val === null || val === undefined || isNaN(val);
    });
}

// 设置饼图配置的函数
function setPieChartOption(data) {
    const allZero = isAllValuesZero(data);
    console.log(allZero);
    // 如果所有值都为0，将每个值设置为1，这样会显示一个完整的圆环（每个扇形角度相同）
    // 同时所有扇形都会显示为灰色
    const processedData = allZero
        ? data.map(item => ({ ...item, value: 1 }))  // 将所有值改为1，确保显示完整圆环
        : data;

    return {
        title: {
            text: 'test组件',
        },
        legend: {
            show: true,
        },
        // 如果所有值都为0，设置颜色数组为灰色，否则使用正常颜色
        color: allZero 
            ? ['#CCCCCC', '#CCCCCC', '#CCCCCC', '#CCCCCC', '#CCCCCC']  // 所有值都为0时，使用灰色数组（确保有足够的灰色）
            : ['#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'], // 正常颜色数组
        series: [
            {
                type: 'pie',
                radius: ['40%', '70%'],  // ****关键配置****：内半径40%，外半径70%，形成环形
                data: processedData,
                labelLine: {
                    show: false,
                },
                label: {
                    show: false,
                },
                // 如果所有值为0，使用itemStyle确保所有扇形都是灰色
                itemStyle: allZero ? {
                    color: '#CCCCCC'  // 所有扇形统一为灰色
                } : {}
            }
        ]
    };
}
console.log(JSON.stringify(setPieChartOption(pieData)));
// 初始化图表
myChart1.setOption(setPieChartOption(pieData));

// 如果需要动态更新数据，可以使用这个函数
// function updatePieData(newData) {
//     myChart1.setOption(setPieChartOption(newData));
// }

/*
 * 【重要理解】为什么柱状图/折线图和饼图的图例对应关系不同？
 * 
 * ============ 柱状图/折线图的结构 ============
 * 每个 series 对象 = 一个数据系列 = 一个图例项
 * 
 * 示例：
 * series: [
 *     { name: '销量', type: 'bar', data: [...] },    ← 图例对应这个对象
 *     { name: '销售额', type: 'line', data: [...] }  ← 图例对应这个对象
 * ]
 * 
 * 特点：
 * - 多个 series 对象 = 多个数据系列 = 多个图例项
 * - 每个系列可以有不同的图表类型（bar、line等）
 * - 适合：展示多个独立的数据系列进行对比
 * 
 * ============ 饼图的结构 ============
 * 一个 series 对象 = 整个饼图
 * series.data 数组中的每个对象 = 饼图的一个扇形 = 一个图例项
 * 
 * 示例：
 * series: [
 *     {
 *         type: 'pie',
 *         data: [
 *             { value: 335, name: '销量' },      ← 图例对应这个 data 对象
 *             { value: 310, name: '销售额' }    ← 图例对应这个 data 对象
 *         ]
 *     }
 * ]
 * 
 * 特点：
 * - 只有一个 series 对象（代表整个饼图）
 * - series.data 数组中的每个对象的 name 对应一个图例项
 * - 适合：展示一个整体的各部分占比
 * 
 * ============ 本质区别 ============
 * 柱状图/折线图：图例项数量 = series 数组的长度
 * 饼图：图例项数量 = series[0].data 数组的长度
 */